<template>
	<view class="ys">
		<view class="inputbox">
			<view class="title">
				签到信息
			</view>
			<view class="info">
				<uni-steps :options="time" active-color="#007AFF" :active="active" direction="column" />
			</view>
		</view>

		<view class="inputbox">
			<view class="title">
				台票信息
			</view>
			<view class="inputli">
				是否需要交台票 : {{needTicket?'需要':'不需要'}}
			</view>
			<view class="inputli">
				台票金额 : {{ticket || '0.00'}}
			</view>
		</view>
		<!-- <view class="inputbox">
			<view class="title">
				上传图片
			</view>
			<view class="imgbox">
				<view class="imglist" v-for="(item,index) in list" :key="index">
					<image :src="item.path" mode=""></image>
					<uni-icons class="icons" type="closeempty" @click="delImg(index)" size="22"
						color="#f00"></uni-icons>
				</view>
				<image src="/static/index/add.png" @click="uploadImg" mode=""></image>
			</view>
		</view> -->
		<button @click="uploadImg">{{signTypeText}}</button>
		<view class="address">已进入打开范围:{{address}}</view>
	</view>
</template>

<script>
	import {
		getStaffSignStatus,
		sign
	} from "@/api/staff.js"
	import {
		getLocationByPoint
	} from "@/api/api.js"
	export default {
		data() {
			return {
				time: [{
						title: '上班打卡',
						desc: '-',
						type: 1
					},
					{
						title: '下班打卡',
						desc: '-',
						type: 2
					}
				],
				active: 0,
				signTypeText: '签到',
				needTicket: false,
				ticket: 0,
				list: [],
				longitude: '',
				latitude: '',
				signType: 1,
				address: ''
			}
		},
		onLoad() {
			this.getStaffSignStatus()
			this.getLocation()
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/shoper/princess/sign/list'
			})
		},
		methods: {
			getLocation() {
				let that = this
				uni.getLocation({
					altitude: true,
					success(res) {
						console.log(res);
						that.longitude = res.longitude
						that.latitude = res.latitude
						getLocationByPoint({
							longitude: res.longitude,
							latitude: res.latitude
						}).then(data => {
							if (data.code == 0) {
								that.address = data.data.address
							} else {
								uni.$showMsg(data.msg)
							}
						})
					},
					fail(err) {
						uni.$showMsg(err.errMsg)
					}
				})
			},
			changeActive() {
				let index = this.time.findIndex(item => item.type == this.signType)
				if (index !== -1) {
					this.active = index
				}
			},
			delImg(i) {
				this.list.splice(i, 1)
			},
			uploadImg() {
				var that = this
				uni.chooseImage({
					sourceType: ['album', 'camera'], //从相册选择
					count: 1,
					success: (res) => {
						let igmFile = res.tempFilePaths;
						uni.showLoading({
							mask: true,
							title: '加载中'
						})
						for (let i = 0; i < igmFile.length; i++) {
							uni.uploadFile({
								url: that.$config.requestUrl +
									'/common/upload',
								header: {
									'tokens': uni.getStorageSync('tokens')
								},
								formData: {
									accept: 'image',
								},
								filePath: igmFile[i],
								name: 'UploadFile',
								success: (res) => {
									uni.hideLoading()
									let imgRes = JSON.parse(res.data); //微信和头条支持
									if (imgRes.code == 0) {
										let imgData = imgRes.data
										sign({
											longitude: that.longitude,
											latitude: that.latitude,
											file_id: imgData.id
										}).then(res => {
											uni.$showMsg(res.msg, function() {
												that.getStaffSignStatus()
											})
										})
									} else {
										uni.$showMsg(imgRes.msg)
										return
									}
								},
								fail(err) {
									uni.hideLoading()
								}
							})
						}
					},
				});
			},
			sign() {
				var that = this
				let file_id = []
				this.list.forEach(item => {
					file_id.push(item.id)
				})
				uni.showModal({
					title: '温馨提示',
					content: '是否进行签到?',
					success(res) {
						if (res.confirm) {
							sign({
								longitude: that.longitude,
								latitude: that.latitude,
								file_id
							}).then(res => {
								uni.$showMsg(res.msg)
								if (res.code == 0) {
									that.getRoomList()
								}
							})
						}
					}
				})
			},
			getStaffSignStatus() {
				getStaffSignStatus().then(res => {
					if (res.code == 0) {
						this.time[0].desc = res.data.work_time
						this.time[1].desc = res.data.close_time
						this.signTypeText = res.data.signTypeText
						this.needTicket = res.data.needTicket
						this.ticket = res.data.ticket
						this.signType = res.data.signType
						this.changeActive()
					} else {
						uni.$showMsg(res.msg, function() {
							uni.navigateBack()
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.inputbox {
		padding: 0 10px;
		background: #fff;
		border-radius: 10px;
		padding: 10px;
		width: 96%;
		margin: 0 auto;
		margin-top: 10px;
		box-sizing: border-box;
		box-shadow: 0 0 10px #eee;

		.title {
			font-weight: bold;
			font-size: 16px;
			position: relative;
			padding-bottom: 12px;
			margin-bottom: 10px;

			&::after {
				position: absolute;
				width: 40px;
				height: 5px;
				background: $uni-bg-color;
				content: '';
				left: 0;
				bottom: 0;
				border-radius: 20px;
			}
		}

		.inputli {
			padding: 10px;
		}

		.imgbox {
			margin: 10px 0;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			image {
				width: 80px;
				height: 80px;
				margin-right: 10px;
			}

			.imglist {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				position: relative;

				.icons {
					position: absolute;
					top: 0;
					right: 10px;
					background: #ffffff80;
					border-bottom-left-radius: 5px;
				}
			}
		}

	}

	button {
		width: 90px;
		height: 90px;
		border-radius: 50%;
		background: $uni-bg-color;
		font-size: 16px;
		line-height: 90px;
		letter-spacing: 2px;
		color: #fff;
		font-weight: bold;
		margin-top: 10vh;
		box-shadow: 0 0 10px $uni-bg-color;
	}

	.address {
		text-align: center;
		margin-top: 10px;
		font-size: 12px;
		color: $uni-bg-color;
	}
</style>